<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>珠峰培训</title>
    <link rel="stylesheet" href="reset.min.css">
    <style>
        html {
            /*
             * 1.最好不要写10PX:浏览器默认最小的字体是12PX
             * 2.font-size设置为多少，相当于1个rem等于多少像素
             * 3.之所以设置为100PX就是为了方便计算REM和PX转换的比例
             */
            font-size: 100px; /*1REM=100PX*/
        }

        .box1 {
            margin: .2rem;
            width: 1rem;
            height: 1rem;
            background: lightcoral;
        }

        .box2 {
            margin: .2rem;
            width: 2rem;
            height: 2rem;
            background: lightgreen;
        }

        .box3 {
            margin: .2rem;
            width: 3rem;
            height: 3rem;
            background: lightblue;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>


</body>
</html>